<template>
  <!-- Vue3组件中的模板结构可以没有跟标签，例如：div -->
  <h1>我是App组件</h1>
  <hr>
  <h1>一个人的信息：</h1>
  <!-- Vue3在解析到此处的插值语法之后，就发现是RefImpl引用对象的话，就开始进行解析，自动读取到.value的值 -->
  <h2>姓名：{{ name }}</h2>
  <h2>年龄：{{ age }}</h2>
  <h2>工作种类：{{ job.type }}</h2>
  <h2>工作薪水：{{ job.salary }}</h2>
  <button @click="changeInfo">修改人的信息</button>

</template>

<script>
// 引入ref 函数
import {ref} from "vue";

export default {
  name: 'App',
  // setup: function () {
  //
  // }

  // Vue3引入了新的配置项，值是一个函数，setup是所有Composition API（组合API）“ 表演的舞台 ”。
  // 组件中所用到的：数据、方法等等，均要配置在setup中。
  // - setup函数的两种返回值：
  //    - 若返回一个对象，则对象中的属性、方法, 在模板中均可以直接使用。【重点关注！】
  //    - 若返回一个渲染函数：则可以自定义渲染内容。【了解】
  setup() {
    // 数据，如果想要是响应式的数据的话，就需要使用ref进行包裹，让vue3进行处理成响应式数据才可以。
    // 使用ref加工之后的就是引用实现的实例对象。简称为：引用对象。不需要关注_开头的，只需要关注value属性即可。
    let name = ref('张三');
    let age = ref(18);
    // 其中ref处理的基本类型是RefImpl引用类型，而ref处理的对象类型是RefImpl引用类型，把其里面的对象类型改成了Proxy代理类型
    let job = ref({
      type: '前端工程师',
      salary: '30k'
    });

    // 方法
    function changeInfo() {
      // 其中RefImpl是 reference implement的缩写，代表的是引用实现。
      console.log(name, age);
      name.value = '李四';
      age.value = 19;
      job.value.type = 'UI设计师';
      job.value.salary = '50k';
    }

    // 方式一：返回对象【常用】
    return {
      // name: name
      // age: age,
      // sayHello: sayHello,
      name, // 返回的对象是键值对的，如果键值对一致性可以触发省略写法
      age,
      job,
      changeInfo,
    }
  },
}
</script>

<style>

</style>
